<template>
	<view>
		<view class="dingbu">
			<image class="fanhui" src="../../static/fanhui.png" @click="fanhui"></image>
			<view>
				<image class="sstp" src="../../static/sstb.png"></image>
				<input class="sskuan" type="text" value="" placeholder="查找商品" />
			</view>
			<image class="fanhui" src="../../static/liebiao.png" @click="qiehuan"></image>
		</view>
		<!-- 列表 -->
		<view class="duanhang">
			<view class="kapian" v-for="or in shangpin" @click="gospxiangq">
				<image class="shpimg" :src="or.spimg" mode="aspectFill"></image>
				<view class="spname">{{or.spname}}</view>
				<view class="hengg">
					<view class="jiag">
						<view class="qian">￥</view>
						<view class="jiage">{{or.jiage}}</view>
					</view>
					<view class="gouwuc">
						<image class="gwimg" src="../../static/gouwud.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="mengban" v-if="zhank==1" @click="qiehuan"></view>
		<view :class="zhank==1?'dise zk':'dise yc'">
			<view class="shaixbt">分类筛选</view>
			<view class="fenlei" v-for="dal in fenlei">
				<view class="dalei" @click="qiehuan">{{dal.dalei}}</view>
				<view class="xiaolei">
					<view class="zilei" v-for="zl in dal.zhilei" @click="qiehuan">{{zl}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				zhank:0,
				fenlei:[{
					dalei:'服装',
					zhilei:['女装','男装','卫衣']
				},{
					dalei:'数码',
					zhilei:['手机','电脑','笔记本','相机','智能手表']
				}],
				shangpin:[{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0411%2F05485b5ej00qrehbk0018c000h800pac.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643360663&t=5562ae8e7805eae9f48d80fef2295a30',
					spname:'沙宣高级护理套装',
					jiage:1288
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0906%252F24cd4125j00qyzq0v0023c000hs00u5g.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362103&t=d965cd5d5473f177cd9637e115e2a8b9',
					spname:'花蝶护发素1000ml家庭套装',
					jiage:388
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F16%2F20210716000427_48d8d.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362363&t=e80859feef53a2fc5996cd591d870e14',
					spname:'飘柔护法精华素200ml',
					jiage:988
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2811118731-4D091433FAD80F042B8A707D1E6D894A%2F0%3Ffmt%3Djpg%26size%3D76%26h%3D1349%26w%3D900%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362469&t=4e19b1e9328d04acdae9b6c08a2e6c31',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcos2.solepic.com%2FUploadImg%2Fimage%2F20200202%2F20200202134952_5047.jpg&refer=http%3A%2F%2Fcos2.solepic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=daeabe4719baae931a8d8ed8b9ea7147',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F140110%2F328704-14011019344655.jpg&refer=http%3A%2F%2Fimg.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=260f7bde69a3d34a742e47946644bae3',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.juimg.com%2Ftuku%2Fyulantu%2F130717%2F325734-130GG9261788.jpg&refer=http%3A%2F%2Fwww.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=5770d08ee128cc1a5a234872343dc2b2',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				},{
					spimg:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.ouquan.cn%2Fd%2Ffile%2Fmyzx%2Fmydt%2F2015-12-02%2F2716874367e3673c723d416f832e6134.jpg&refer=http%3A%2F%2Fwww.ouquan.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643362520&t=28a37e8dda5198791b68a7c77039d7a8',
					spname:'飘柔护法精华素200ml',
					jiage:1268
				}],
			}
		},
		methods: {
			// 分类筛选
			qiehuan(){
				if(this.zhank==0){
					this.zhank = 1
				}else{
					this.zhank = 0
				}
				
			},
			// 反回
			fanhui(){
				wx.navigateBack({
					delta:1
				})
			},
			// 商品详情
			gospxiangq(){
				uni.navigateTo({
					url:'../spxiangqing/spxiangqing'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 分类
	.mengban{
		position: fixed;
		top: 0;
		z-index: 666;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.5);
	}
	.dise{
		position: fixed;
		top: 0;
		right: 0;
		width: 540rpx;
		height: 100%;
		background: #ffffff;
		z-index: 999;
		padding: 30rpx;
		.shaixbt{
			font-size: 40rpx;
			font-weight: bold;
		}
		.fenlei{
			margin-left: 20rpx;
			margin-top: 30rpx;
			.dalei{
				font-weight: bold;
				font-size: 35rpx;
				color: #ff007f;
				margin-bottom: 10rpx;
			}
			.xiaolei{
				font-size: 26rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.zilei{
					padding: 5rpx 20rpx;
					background: #e2e2e2;
					color: #303133;
					border-radius: 30rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.zk{
		transform: translateX(0%);
		transition:0.5s;
	}
	.yc{
		transform: translateX(100%);
		transition:0.5s;
	}
	// 头部
	.dingbu{
		position: fixed;
		top: 0;
		width: 710rpx;
		height: 45px;
		background: #f0f0f0;
		z-index: 99;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.fanhui{
			width: 20px;
			height: 20px;
		}
		.sskuan{
			background: #FFFFFF;
			width: 450rpx;
			padding: 8rpx 50rpx 8rpx 80rpx;
			border-radius: 30rpx;
		}
		.sstp{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			margin: 8rpx 0 0 10rpx;
		}
		
	}
	
	// 商品列表
	.duanhang{
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		margin-top: 45px;
		.kapian{
			width: 345rpx;
			height: 500rpx;
			background: #f8f8f8;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.shpimg{
				width: 345rpx;
				height: 360rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
			.spname{
				padding: 5rpx 10rpx;
				display: block;
				font-size:28rpx;
				color:#626262;
				overflow: hidden;
				white-space: nowrap;
				text-overflow:ellipsis;
			}
			.hengg{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5rpx 10rpx 20rpx 10rpx;
				.jiag{
					display: flex;
					align-items: flex-end;
					.qian{
						font-size: 25rpx;
					}
					.jiage{
						font-weight: bold;
					}
				}
				.gouwuc{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50rpx;
					height: 50rpx;
					background: #323232;
					border-radius: 25rpx;
					.gwimg{
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
		.chakgd{
			width: 710rpx;
			height: 60rpx;
			font-size: 26rpx;
			color: #808080;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			background: #f8f8f8;
			margin-bottom: 50rpx;
		}
	}
</style>
